// 大轮播图
var parent = document.getElementById('parent')
var rightBtn = document.getElementById('rightBtn')
var leftBtn = document.getElementById('leftBtn')
var childImg = document.getElementById('child').getElementsByTagName('img')[0]
var liList = document.getElementById('ul2').getElementsByTagName('li')

// parent.scrollLeft = 600
// 控制轮播图
var num = 0
var moveTimer;
time()
function time() {
    moveTimer = setInterval(imgMove, 2000)
}
function imgMove() {
    num++
    if (num > 3) {
        num = 0
        parent.scrollLeft = 0
    }
    if (num < 0) {
        num = 3
        parent.scrollLeft = 1800
    }
    // 缓慢滚动
    slowScroll(parent.scrollLeft, childImg.clientWidth * num)
    // 改变颜色
    changeClor()
}
function slowScroll(start, end) {
    var step = 0
    var maxStep = 5
    var every = (end - start) / maxStep  // 每一步走60
    var timer = setInterval(function () {
        step++
        // 移动一张图片的距离后 清空定时器
        if (step > maxStep) {
            clearInterval(timer)
        } else {
            parent.scrollLeft += every
        }
    }, 50)
}
function changeClor() {
    for (var i = 0; i < liList.length; i++) {
        liList[i].style.backgroundColor = ''
    }
    liList[num].style.backgroundColor = 'red'
}
for (let i = 0; i < liList.length; i++) {
    liList[i].onmouseenter = function () {
        // console.log(i);
        num = i
        // 清空定时器
        clearInterval(moveTimer)
        // 轮播
        slowScroll(parent.scrollLeft, childImg.clientWidth * num)
        // 改变小点颜色
        changeClor()
        // 重新自动轮播
        time()
    }
}
// 右
rightBtn.onclick = function () {
    // 清空定时器
    clearInterval(moveTimer)
    imgMove()
    // 重新自动轮播
    time()
}
// 左
leftBtn.onclick = function () {
    // 清空定时器
    clearInterval(moveTimer)
    num -= 2
    imgMove()
    // 重新自动轮播
    time()
}
// 鼠标移入显示
// parent.onmouseover=function(){
//     rightBtn.style.display='block'
//     leftBtn.style.display='block'
// }
// parent.onmouseout=function(){
//     rightBtn.style.display='none'
//     leftBtn.style.display='none'
// }
// 计时器
var hours = 1;
var minutes = 5;
var seconds = 0;
var hoursDisplay = document.getElementById('hours');
var minutesDisplay = document.getElementById('minutes');
var secondsDisplay = document.getElementById('seconds');

function startTimer() {
    var countdown = setInterval(function () {
        if (hours == 0 && minutes == 0 && seconds == 0) {
            clearInterval(countdown);
            hoursDisplay.textContent = "00";
            minutesDisplay.textContent = "00";
            secondsDisplay.textContent = "00";
        } else {
            if (seconds == 0) {
                if (minutes == 0) {
                    hours--;
                    minutes = 59;
                } else {
                    minutes--;
                }
                seconds = 59;
            } else {
                seconds--;
            }
            hoursDisplay.textContent = (hours < 10 ? "0" : "") + hours;
            minutesDisplay.textContent = (minutes < 10 ? "0" : "") + minutes;
            secondsDisplay.textContent = (seconds < 10 ? "0" : "") + seconds;
        }
    }, 1000);
}
startTimer();
// 右侧tab切换1
var timerleft = document.getElementById('timerleft')
var timerright = document.getElementById('timerright')
var timertab1 = document.getElementById('timertab1')
var timertab2 = document.getElementById('timertab2')

let j = 0;
setInterval(function () {
    if (j % 2 == 0) {
        // console.log(sec3ul1.style);
        timertab1.style.display = 'none';
        timertab2.style.display = 'block';
        timerleft.style.backgroundColor = 'rgb(231, 231, 231)';
        timerright.style.backgroundColor = 'white';
    } else {
        timertab1.style.display = 'block';
        timertab2.style.display = 'none';
        timerleft.style.backgroundColor = 'white';
        timerright.style.backgroundColor = 'rgb(231, 231, 231)';
    }
    j++;
}, 5000);
timerleft.onmouseenter = function () {
    timertab1.style.display = 'block';
    timertab2.style.display = 'none';
    timerleft.style.backgroundColor = 'white';
    timerright.style.backgroundColor = 'rgb(231, 231, 231)';
}
timerright.onmouseenter = function () {
    timertab1.style.display = 'none';
    timertab2.style.display = 'block';
    timerleft.style.backgroundColor = 'rgb(231, 231, 231)';
    timerright.style.backgroundColor = 'white';
}

// 右侧tab切换2
var leftdot = document.getElementById('leftdot')
var rightdot = document.getElementById('rightdot')
var sec3ul1 = document.getElementById('sec3ul1')
var sec3ul2 = document.getElementById('sec3ul2')
// console.log(sec3ul2);

let i = 0;
setInterval(function () {
    if (i % 2 == 0) {
        // console.log(sec3ul1.style);
        sec3ul1.style.display = 'none';
        sec3ul2.style.display = 'block';
        leftdot.style.backgroundColor = '#9e9d9d';
        rightdot.style.backgroundColor = 'red';
    } else {
        sec3ul1.style.display = 'block';
        sec3ul2.style.display = 'none';
        leftdot.style.backgroundColor = 'red';
        rightdot.style.backgroundColor = '#9e9d9d';
    }
    i++;
}, 5000);
leftdot.onmouseenter = function () {
    sec3ul1.style.display = 'block';
    sec3ul2.style.display = 'none';
    leftdot.style.backgroundColor = 'red';
    rightdot.style.backgroundColor = '#9e9d9d';
}
rightdot.onmouseenter = function () {
    sec3ul1.style.display = 'none';
    sec3ul2.style.display = 'block';
    leftdot.style.backgroundColor = '#9e9d9d';
    rightdot.style.backgroundColor = 'red';
}
// 固定定位导航栏
window.onscroll = function () {
    var daohang = document.getElementsByClassName('daohang')[0]; // 选择第一个具有类名为'daohang'的元素
    if (window.scrollY > 920) {
        daohang.style.display = "block";
    } else {
        daohang.style.display = "none";
    }
};

// 十个tab切换
var sec4ulli = document.getElementsByClassName('sec4ulli')
var sec4ulbi = document.getElementsByClassName('sec4ulbi')
// console.log(sec4ulli);

// console.log(sec4ulli[1]);


// for (let h = 0; h < sec4ulli.length; h++) {
//     // console.log(h);
//     sec4ulli[h].onmouseenter = function () {
//         console.log(h);
//         for(var i=0;i<sec4ulli.length;i++){
//             sec4ulbi[i].style.display='none'
//             sec4ulli[i].style.display='block'
//         }
//         sec4ulbi[h].style.display='block'
//         this.style.display='none'

//     }

// }
// 大型tab切换
var sec4left1 = document.getElementsByClassName('sec4left1')[0]
var sec4right1 = document.getElementsByClassName('sec4right1')[0]
var sec4ulqian = document.getElementsByClassName('sec4ulqian')[0]
var sec4ulhou = document.getElementsByClassName('sec4ulhou')[0]
let sec4li11 = document.getElementsByClassName('sec4li11')[0]
let sec4li12 = document.getElementsByClassName('sec4li12')[0]
var sec4ullihou = document.getElementsByClassName('sec4ullihou')
var sec4ulbihou = document.getElementsByClassName('sec4ulbihou')
// console.log(sec4li12);
sec4left1.onmouseenter = function () {
    sec4ulqian.style.display = 'block'
    sec4ulhou.style.display = 'none'
    sec4left1.style.backgroundColor = '#fff'
    sec4right1.style.backgroundColor = '#f5f5f5'
    // sec4li11.style.display = 'none'
    // sec4li12.style.display = 'block'
    for (let h = 0; h < sec4ulli.length; h++) {
        // console.log(h);
        sec4ulli[h].onmouseenter = function () {
            // console.log(h);
            for (var i = 0; i < sec4ulli.length; i++) {
                sec4ulbi[i].style.display = 'none'
                sec4ulli[i].style.display = 'block'
            }
            sec4ulbi[h].style.display = 'block'
            this.style.display = 'none'

        }

    }

}
sec4right1.onmouseenter = function () {
    sec4ulqian.style.display = 'none'
    sec4ulhou.style.display = 'block'
    sec4left1.style.backgroundColor = '#f5f5f5'
    sec4right1.style.backgroundColor = '#fff'
    // sec4li11.style.display = 'none'
    // sec4li12.style.display = 'block'

    for (let n = 0; n < sec4ullihou.length; n++) {
        // console.log(h);
        sec4ullihou[n].onmouseenter = function () {
            // console.log(h);
            for (var i = 0; i < sec4ullihou.length; i++) {
                sec4ulbihou[i].style.display = 'none'
                sec4ullihou[i].style.display = 'block'
            }
            sec4ulbihou[n].style.display = 'block'
            this.style.display = 'none'

        }

    }

}
// 最新上架限时特价畅销推荐tab切换
var sec4thr1 = document.getElementsByClassName('sec4thr1')[0]
var sec4thr2 = document.getElementsByClassName('sec4thr2')[0]
var sec4thr3 = document.getElementsByClassName('sec4thr3')[0]
var tabtuone = document.getElementById('tabtuone')
var tabtutwo = document.getElementById('tabtutwo')
var tabps1 = document.getElementsByClassName('tabps1')[0]
var tabps2 = document.getElementsByClassName('tabps2')[0]
// console.log(sec4thr3);
sec4thr1.onmouseenter = function () {
    tabtuone.style.display = 'block'
    tabtutwo.style.display = 'none'
    tabps1.style.display = 'block'
    tabps2.style.display = 'none'
    sec4thr1.style.cssText = 'border-top: 2px solid black;border-left: 2px solid black;border-right: 2px solid black;border-bottom: none;background-color: white;'
    sec4thr2.style.cssText = 'border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;'
    sec4thr3.style.cssText = "border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;"
}
sec4thr2.onmouseenter = function () {
    tabtuone.style.display = 'none'
    tabtutwo.style.display = 'block'
    tabps1.style.display = 'none'
    tabps2.style.display = 'block'
    sec4thr1.style.cssText = 'border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;background-color: #f5f5f5;'
    sec4thr2.style.cssText = 'border-top: 2px solid black;border-left: 2px solid black;border-right: 2px solid black;border-bottom: none;background-color: white;'
    sec4thr3.style.cssText = "border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;"
}
sec4thr3.onmouseenter = function () {
    tabtuone.style.display = 'block'
    tabtutwo.style.display = 'none'
    tabps1.style.display = 'block'
    tabps2.style.display = 'none'
    sec4thr1.style.cssText = 'border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;background-color: #f5f5f5;'
    sec4thr2.style.cssText = 'border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 2px solid black;'
    sec4thr3.style.cssText = "border-top: 2px solid black;border-left: 2px solid black;border-right: 2px solid black;border-bottom: none;background-color: white;"
}
// section部分tab切换
var seclitab1 = document.getElementById('seclitab1');
var sec1tabps1 = document.getElementsByClassName('sec1tabps1')[0];
var seculli = document.getElementsByClassName('secul')[0].getElementsByTagName('li');
var secbanxin2=document.getElementsByClassName('secbanxin2')[0]
// 为sec1tabps1添加mouseenter和mouseleave事件监听器
// sec1tabps1.onmouseenter = function() {
//     // 当鼠标进入sec1tabps1时，不改变任何样式
// };

sec1tabps1.onmouseleave = function() {
    // 当鼠标离开sec1tabps1时，隐藏sec1tabps1
    sec1tabps1.style.display = 'none';
};

for (var m = 0; m < seculli.length; m++) {
    seculli[m].onmouseenter = function () {
        // 当鼠标进入当前li元素时，显示sec1tabps1
        sec1tabps1.style.display = 'block';
        
        // 设置当前元素的样式
        this.style.cssText = 'border-top: 2px solid #ff2832;border-left: 2px solid #ff2832;border-bottom: 2px solid #ff2832;background-color: white;';
        
        // 遍历所有li元素，除了当前元素外，设置右边框
        for (var i = 0; i < seculli.length; i++) {
            if (seculli[i] !== this) {
                seculli[i].style.borderRight = '2px solid #ff2832';
            }
        }
    };
    
    seculli[m].onmouseleave = function () {
        // 遍历所有li元素，移除右边框
        for (var i = 0; i < seculli.length; i++) {
            seculli[i].style.borderRight = 'none';
        }
        // 恢复当前元素的样式
        this.style.cssText = 'border: none;';
    }
        secbanxin2.onmouseleave=function(){
        sec1tabps1.style.display = 'none';
        for (var i = 0; i < seculli.length; i++) {
            seculli[i].style.borderRight = 'none';
        }
        // 恢复当前元素的样式
        this.style.cssText = 'border: none;';
    }
 }
